<script lang="ts" setup>
import { onMounted, ref, onUpdated } from 'vue';
import * as echarts from "echarts";
import "echarts-liquidfill";

const props = withDefaults(defineProps<{
  backgroundColor?: string
  shadow?: string
  data?: number | string
}>(), {
  backgroundColor: '#e25d3e',
  shadow: '#ffe5e0',
})

const liqiud = ref<HTMLElement>()
const initLiquidEchart = () => {
  let myChart = echarts.init(liqiud.value!)
  let value = 0.6
  // 把配置和数据放这里
  myChart.setOption({
    title: {
      // 标题
      text: '',
      textStyle: {
        // 标题的样式
        color: '#888', // 字体颜色
        fontFamily: 'Microsoft YaHei', // 字体
        fontSize: 24,
        fontWeight: '400',
        align: 'center', // 文字的水平方式
        baseline: 'middle',
        position: 'inside',
        verticalAlign: 'middle', // 文字的垂直方式
      },
      left: 'center', // 定位
      top: '20%',
    },
    series: [
      {
        type: 'liquidFill',
        radius: '78%', // 水球大小
        waveAnimation: true,
        center: ['50%', '50%'],
        color: [props.shadow, props.backgroundColor],
        data: [value, value], // data个数代表波浪数
        amplitude: 10, //振幅
        // 图形样式
        itemStyle: {
          opacity: 1, // 波浪的透明度
          shadowBlur: 0, // 波浪的阴影范围
        },
        backgroundStyle: {
          borderWidth: 1, // 边框的宽度
          borderColor: props.backgroundColor, // 边框颜色
          color: '#fff',
        },
        label: {
          // 数据展示样式
          show: true,
          textStyle: {
            color: '#000',
            insideColor: '#fff',
            fontSize: 25,
            fontWeight: 600,
          },
          formatter: (params: any) => {
            return `${Number(props.data).toFixed(2)}%` // 文字显示
          },
        },
        outline: {
          show: false,
        },
      },
    ],
  })
}
onUpdated(() => {
  initLiquidEchart()

})
onMounted(() => {

  console.log(1)
})
</script>
<template>
  <div class="liqiud" ref="liqiud" style="width: 130px; height: 130px;"></div>
</template>
<style></style>